import React, { useState, useEffect } from 'react';
import { CustomCascader } from './CustomCascader';
import { CustomSelect } from './CustomSelect';
import { CustomUniversitySearch } from './CustomUniversitySearch';
import { Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';


export function RecommendForm() {
  const [ProvinceData, setProvinceData] = useState([]);
  const [UniversityData, setUniversityData] = useState([]);
  const [SchoolTypeData, setSchoolTypeData] = useState([]);
  const [MajorClassData, setMajorClassData] = useState([]);


  useEffect(() => {
    fetch('ProvinceData.json')
      .then(response => response.json())
      .then(data => {
        const hotCitiesTransformed = {
          value: 'hot_cities',
          label: '热门城市',
          children: data.hotCity.map(city => ({
            value: city.id,
            label: city.name
          }))
        };
        const transformedData = data.areas.map(area => ({
          value: area.id,
          label: area.name,
          children: area.children ? area.children.map(child => ({
            value: child.id,
            label: child.name
          })) : []
        }));
        setProvinceData([hotCitiesTransformed, ...transformedData]);

        const SchoolTypeData = data.tags.type.map(type => ({
          value: type.id,
          label: type.name,
        }));
        setSchoolTypeData(SchoolTypeData);

      })
      .catch(error => {
        console.error("There was an error fetching the data", error);
      });
    fetch('MajorClassData.json')
      .then(response => response.json())
      .then(data => {
        const MajorClassData = data.body.map(major => ({
          value: major.id,
          label: major.name,
          children: major.children ? major.children.map(child => ({
            value: child.id,
            label: child.name
          })) : []
        }));
        setMajorClassData(MajorClassData);
      })
      .catch(error => {
        console.error("There was an error fetching the data", error);
      });
    fetch('UniversityData.json')
      .then(response => response.json())
      .then(data => {
        // const UniversityData = data.item.map(item => ({
        //   province_name: item.province_name,
        //   label: item.name,
        // }));
        const UniversityData = data.item.map(item => item.name);
        setUniversityData(UniversityData);
        // console.log(UniversityData)
      })
      .catch(error => {
        console.error("There was an error fetching the data", error);
      });
  }, []);



  return (
    <div className='border-4'>
      <div className="grid grid-cols-3 gap-4">
        <div className="p-4">
          <div className="col-span-1 p-4">
            <CustomCascader options={ProvinceData} title="就读地区：" placeholder="不限" />
          </div>
        </div>
        <div className="p-4">
          <div className="col-span-1 p-4">
            <CustomSelect options={SchoolTypeData} title="大学类型：" placeholder="不限" />
          </div>
        </div>
        <div className="p-4">
          <div className="col-span-1 p-4">
            <CustomCascader options={MajorClassData} title="专业类别：" placeholder="不限" />
          </div>
        </div>
      </div>


      <div className="p-4 grid grid-cols-3 gap-4">
        <div className="col-span-1 p-4">
          <CustomUniversitySearch options={UniversityData} title="搜索大学：" placeholder="请输入大学名称" />
        </div>
        <div className="col-span-1 p-4">
          <CustomUniversitySearch options={UniversityData} title="搜索大学：" placeholder="请输入大学名称" />
        </div>
        <div className="flex items-center justify-center col-span-1 p-4">
          <Button className='w-1/2' icon={<SearchOutlined />}>Search</Button>
          <Button className='ml-4' type="dashed">重置已选条件</Button>
        </div>

      </div>
    </div>
  );
}
